<template>
  <div>
    <!-- 按钮栏 -->
    <button-row :permiList="permiList" @dialogShow="dialogShow"></button-row>
    <el-table 
      ref="table"
      v-loading="loading" 
      height="65vh" 
      :data="dataList" 
      stripe 
      border 
      highlight-current-row 
      @current-change="tableCurrentChange" 
      style="margin: 10px 0"
    >
      <el-table-column label="序号" align="center" prop="seq" width="80"/>
      <el-table-column label="短信类型" align="center" prop="name" width="180" :show-overflow-tooltip="true"/>
      <el-table-column label="信息代码" align="center" prop="code" width="150"/>
      <el-table-column label="参数1" align="center" prop="param1" width="200" :show-overflow-tooltip="true"/>
      <el-table-column label="参数2" align="center" prop="param2" :show-overflow-tooltip="true"/>
      <el-table-column label="是否开启" align="center" prop="status">
        <template slot-scope="scope">
          <span class="status" @click="changeStatus(scope.row)" :class="scope.row.status == '0' ? 'danger' : 'success' ">{{scope.row.statusNm}}</span>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-size="queryParams.pageSize"
      :page-sizes="[10, 20, 50, 100, 200]"
      layout="total, prev, pager, next, sizes"
      :total="total"></el-pagination>

    <el-dialog :title="title" :visible.sync="open" width="400px" append-to-body :close-on-click-modal="false">
      <el-form ref="form" :model="form" :rules="rules" label-width="auto" style="font-size: 13px !important" :disabled="dealType == 'View'">
        <el-row>
          <el-col :span="24">
            <el-form-item label="名称" prop="name">
              <el-input v-model.trim="form.name" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="编码" prop="code">
              <el-input v-model.trim="form.code" placeholder="请输入" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="说明">
              <el-input v-model.trim="form.nt" placeholder="请输入"/>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="参数1">
              <el-input v-model.trim="form.param1" placeholder="请输入"/>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="参数2">
              <el-input v-model.trim="form.param2" placeholder="请输入"/>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="状态">
              <el-select v-model.trim="form.status" :clearable="false" placeholder="请选择" style="width: 100%">
                <el-option
                  v-for="item in statusOptions"
                  :key="item.val"
                  :label="item.label"
                  :value="item.val">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="排序">
              <el-input v-model.trim="form.seq" placeholder="请输入"/>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="上级节点">
              <el-input v-model.trim="form.pcode" placeholder="请输入" disabled />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import ButtonRow from '@/components/ButtonRow/index';
import { mapGetters } from 'vuex';

export default {
  components: {
    ButtonRow,
  },
  computed:{
    ...mapGetters([
      'district'
    ])
  },
  data() {
    return {
      
      selectCode: undefined,
      // 权限列表
      permiList: [],
      // 遮罩层
      loading: true,
      // 选中当前行
      currentRow: undefined,
      // 操作状态
      dealType: undefined,
      // 总条数
      total: 1,
      // 参数表格数据
      dataList: [],
      // 查询参数
      queryParams: {
        pageIndex: 1,
        pageSize: 50,
      },
      title: '',
      open: false,
      form: {},
      // 表单校验
      rules: {
        name: [
          { required: true, message: "请输入名称", trigger: "blur" }
        ],
        code: [
          { required: true, message: "请输入编码", trigger: "blur" }
        ],
      },
      // 状态
      statusOptions: [
        { label: '正常', val: '1' },
        { label: '废除', val: '0' },
      ]
      
    };
  },
  created() {
    this.reset();
    
    this.getList();
    this.getPagePermis()
  },
  methods: {
    
    // 获取当前页面权限
    getPagePermis(){
      let allMenu = JSON.parse(localStorage.getItem('allMenu'));
      let name = this.$route.name;
      this.pagePermission(name,allMenu);
    },
    pagePermission(name,allMenu){
      allMenu = Array.from( allMenu )
      allMenu.forEach((item) => {
        if( item.name == name ){
          this.permiList = item.sysFunc; 
          this.menuCode = item.menuCode;
        }else if ( item.children && item.children.length > 0 ){
          item.children = Array.from( item.children );
          this.pagePermission(name,item.children);
        }
      });
    },
    /** 查询参数列表 */
    getList() {
      this.loading = true;
      this.$request({
        url: '/zy-api/api/waterSmsConf/getInformationReminderList',
        method: 'post',
        data: this.queryParams
      }).then(res=>{
        if(res.status == 200){
          this.dataList = res.data.list;
          this.total = res.data.total;
        }else{
          this.dataList = [];
          this.total = 0;
        }
        this.loading = false;
      });
    },
    /** 改变状态 */
    changeStatus(row) {
      let text = row.status == 1 ? '关闭' : '开启'
      this.$confirm('您确认'+ text +'该项信息提醒吗?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(()=>{ 
        let url = row.status == 1 ? '/zy-api/api/waterSmsConf/updInformationReminderShut' : '/zy-api/api/waterSmsConf/updInformationReminderOpen';
        this.$request({
          url: url,
          method: 'post',
          data: {
            id: row.id
          }
        }).then(res=>{
          if(res.status == 200){
            this.getList()
          }else{
            this.msgError(res.errors[0].message);
          }
        })
      }).catch(()=>{})
    },
    // 弹窗判断
    dialogShow(val){
      this.dialogType = val.type;
      let key = val.type
      switch (key) {
        case 'Edit':
          this.handleUpdate()
          break;
        default:
          break;
      }
    },
    // 表单重置
    reset() {
      this.form = {
        seq: undefined,
        code: undefined,
        pcode: undefined,
        name: undefined,
        status: undefined,
        statusNm: undefined,
        param1: undefined,
        param2: undefined,
        nt: undefined
      };
      this.resetForm("form");
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    echoData( id ) {
      this.$request({
        url: '/zy-api/api/waterSmsConf/updInformationReminderOpen',
        method: 'post',
        data: {
          id: id
        }
      }).then(res=>{
        if(res.status == 200) {
          this.form = res.data[0];
          this.form.pcode = '短信类型';

        }
      })
    },
    /** 编辑按钮 */
    handleUpdate() {
      this.reset();
      if(this.currentRow && this.currentRow.id) {
        // this.echoData(this.currentRow.id);
        this.form = {...this.currentRow};
        this.form.pcode = '信息提醒配置';
      }else {
        this.$confirm('请选择一条记录进行操作！', "提示", {
          confirmButtonText: "确定",
          showCancelButton: false,
          type: "warning"
        }).then().catch();
        return;
      }
      this.title = '短信配置';
      this.open = true;
      this.dealType = 'Edit';
    },
    /** 提交按钮 */
    submitForm: function() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.dealType == 'Edit') {
            this.form.statusNm = this.form.status == 0 ? '已关闭' : '已开启';
            this.form.pcode = 'XXTXPZ';
            this.$request({
              url: '/zy-api/api/waterSmsConf/updWaterSmsConfig',
              method: 'post',
              data: this.form
            }).then(response => {
              if(response.status == 200){
                this.msgSuccess("修改成功");
                this.getList();
                this.open = false;
              }else if(response.status == 101){
                this.msgError(response.errors[0].message);
              }
            });
          } 
        }
      });
    },
    // 表格选中行
    tableCurrentChange(row){
      this.currentRow = row;
      this.$refs.table.toggleRowSelection(row,true)
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageIndex = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 分页
    handleSizeChange(size){
      this.queryParams.pageSize = size
      this.getList()
    },
    handleCurrentChange(index){
      this.queryParams.pageIndex = index;
      this.getList()
    },
  }
};
</script>
<style lang="scss" scoped>
.status{
  &:hover{
    text-decoration: underline;
    cursor: pointer;
  }
}
.danger{
  color: #F56C6C;
}
.success{
  color: #67C23A;
}
</style>